<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1_高阶函数_函数柯里化</title>
</head>
<body>
    	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        //#region
        /*
            高阶函数:如果一个函数符合下面的2个任何一个, 就是高阶函数 
                    1.如果A函数, 接收的参数是一个函数,那么A就可以称之为高阶函数 
                    2.如果A函数, 调用的返回值依然是一个函数,那么A就可以称只为高阶函数
                    3.常见的高阶函数有:Promise, setTimeout arr.map 等的 

            函数的柯里化:通过函数调用继续返回函数的方式, 实现多次接收参数最后统一处理的函数编码形式.

            function sum(a){
                return (b)=>{
                    return(c)=>{
                        return a+b+c
                    }
                }
            }
        */
       // #endregion


       class  Login extends React.Component{


        state={
            username:'',
            password:''
        }

        saveFormData = (dataType) => {
        
            return (event)=>{
        
                this.setState({[dataType]:event.target.value})
                // this.setState({[dataType]:event.target.value})
            }
        }


        handleSubmit = (event) => {
            event.preventDefault()
            const {username,password}=this.state
            alert(`我的用户名是${username},我的密码是${password}`)
        }
            render() {
                return (
                    <form onSubmit={this.handleSubmit}>
                        用户名: <input onChange={this.saveFormData('username')} type="text"  name="username"/>
                        <br/>
                        密&nbsp;&nbsp;&nbsp;码: <input  onChange={this.saveFormData('password')} type="password"  name="password"/>
                        <br/>
                        <button>登录</button>
                    </form>
                )
            }
       }

       ReactDOM.render(<Login/> ,document.getElementById('test'))
    </script>

</body>
</html>